<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<view class="search">
			<u-search placeholder="请输入小程序名称或APPID检索" v-model="search"></u-search>
		</view>

		<view class="applet" v-if="lists.length > 0">
			<view class="item" v-for="(item,index) in lists">
				<view class="tips error" v-if="item.face_status != 3">人脸未核验</view>
				<view class="tips success" v-else>已通过核验</view>
				<view class="header">
					<view>
						<u--image :src="item.logo" width="60rpx" height="60rpx"></u--image>
					</view>
					<view class="title">{{ item.name }}</view>
				</view>
				<view class="content">
					<view class="line" @click="onRefreshVerify(item.id)" v-if="item.face_status != 3">
						<view class="label">人脸核验</view>
						<view class="value"><u--text suffixIcon="reload" iconStyle="font-size: 18px;color:#2b85e4;"
								text="未核验 - [刷新]"></u--text></view>
					</view>

					<view class="line">
						<view class="label">主体名称</view>
						<view class="value">{{ item.company.name }}</view>
					</view>
					<view class="line">
						<view class="label">唯一标识</view>
						<view class="value">{{ item.appid }}</view>
					</view>
					<view class="line">
						<view class="label">备案状态</view>
						<view class="value">
							<block v-if="item.status == 2">
								平台审核中
							</block>
							<block v-else-if="item.status == 3">
								平台审核驳回
							</block>
							<block v-else-if="item.status == 4">
								管局审核中
							</block>
							<block v-else-if="item.status == 5">
								管局审核驳回
							</block>
							<block v-else-if="item.status == 6">
								已备案
							</block>
							<block v-else-if="item.status == 1024">
								未备案
							</block>
							<block v-else-if="item.status == 1025">
								未备案 && 小程序基本信息未填
							</block>
							<block v-else-if="item.status == 1026">
								未备案 && 小程序类目未填
							</block>
							<block v-else-if="item.status == 1027">
								未备案 8& 小程序基本信息未填 8& 小程序类目未填
							</block>
							<block v-else>
								未知状态
							</block>
						</view>
					</view>
					<!-- <view class="line">
						<view class="label">备案名称</view>
						<view class="value">{{ item.name }}</view>
					</view> -->
					<view class="line">
						<view class="label">创建时间</view>
						<view class="value">{{ item.create_at }}</view>
					</view>
				</view>
				<view class="btns">
					<view class="btn" @click="onTask(item)" v-if='item.face_status==0||item.face_status==2'>
						人脸核验
					</view>
					<view class="btn" @click="onViewSubject(item.company_id,item.id)">
						主体信息
					</view>
					<view class="btn" v-if='item.face_status==3&&item.status!=2&&item.status!=4&&item.status!=6'
						@click="applet_id=item.id;onCreatedOrder()">
						发起备案
					</view>
					<view class="btn" @click="onRefresh(item.id)"
						v-else-if='item.face_status==3&&item.status==2||item.status==4'>
						状态刷新
					</view>
					<view class="btn" @click="onApplet(item)">
						小程序管理
					</view>

				</view>
			</view>
		</view>

		<block v-else>
			<u-empty text="暂无更多数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</block>


		<view class="modal">
			<u-modal @confirm="saveImage" @cancel="is_qrcode = false" :show="is_qrcode" showCancelButton title="微信扫码授权"
				confirmText="保存二维码" cancelText="取消操作">
				<view class="slot-content">
					<view class="canvas">
						<!-- 二维码插件 width height设置宽高 -->
						<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
					</view>
				</view>
			</u-modal>
		</view>

		<view class="submit">
			<view class="btn">
				<u-button @click="on_get_auth_page" shape="circle" type="primary" text="快速授权小程序"
					color="linear-gradient(to right, #2979ff, #2b85e4)"></u-button>
			</view>
		</view>

		<u-popup :show="show" @close="show=false" customStyle='padding:40rpx;max-height:50vh;overflow-y: auto;'>
			<view style="background-color: #FFFFFF;">
				<view class="error-msg" v-for='(item,index) in errorData'>
					<view style="color: #FFFFFF;font-size: 13px;">{{item.errmsg}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		pre_auth_page,
		applet,
		VerifyTask,
		queryVerifyTask,
		ApplyIcp,
		modify,
		getFilingStatus,
		againIcp
	} from "@/api/applet.js";
	import {
		created
	} from "@/api/order.js";
	import {
		subjectTypes
	} from "@/api/subject.js";
	import Vue from 'vue';
	import uQRCode from '@/uni_modules/cc-defineQRCode/components/cc-defineQRCode/common/uqrcode.js'
	export default {
		data() {
			return {
				show: false,
				errorData: [],
				last_page: 1,
				applet_index: 0,
				applet_id: '',
				principal_id: '',
				qrcodeText: 'eoruw20230528',
				// 二维码尺寸
				qrcodeSize: 280,
				// 最终生成的二维码图片
				qrcodeSrc: '',
				is_qrcode: false,
				lists: [],
				search: '',
				page: 1,
				is_reach: false,
				tabs: [{
					name: '全部备案',
				}, {
					name: '未支付',
				}, {
					name: '进行中'
				}, {
					name: '已备案'
				}],
				service_tree: []
			};
		},
		onShow() {
			let _this = this
			_this.page = 1;
			_this.getApplet()
		},
		onPullDownRefresh() {
			let _this = this
			_this.page = 1;
			_this.getApplet()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			let _this = this
			if (_this.last_page >= _this.page) {
				return false;
			}
			_this.is_reach = true
			_this.page = _this.page + 1
			_this.getApplet()
		},
		methods: {
			//发起人脸核验
			onTask(item) {
				VerifyTask({id:item.id}).then(res => {
				    uni.showToast({
				    	title:'发起核验成功'
				    })
				})
			},
			//跳转小程序
			onApplet(item) {
				uni.navigateTo({
					url: '/pages/charge/form/index?nature_value=&id=' + item.principal_id +
						'&applet_id=' + item.id
				})
			},
			onRefresh(id) {
				let _this = this
				getFilingStatus({
					id: id
				}).then(res => {
					_this.$refs.uToast.show({
						type: 'success',
						message: "刷新成功",
						complete() {
							_this.getApplet()
						}
					})
				})
			},
			onCreatedOrder() {
				let _this = this
				uni.showLoading({
					title: '请求中...'
				})
				created({
					app_id: _this.applet_id
				}).then(res => {
					if (res.code == 200) {
						uni.hideLoading()
						uni.navigateTo({
							url: '/pages/cashier/index/index?applet_id=' + _this.applet_id + '&price=' +
								res.data.price + '&order_no=' + res.data.order_no + '&order_id=' + res.data
								.order_id
						})
					}
					if (res.code == 201) {
						againIcp({
							id: _this.applet_id
						}).then(val => {

							if (val.code == 200) {
								let result = val.data
								if (result.errcode == 0) {
									_this.$refs.uToast.show({
										type: 'success',
										message: '发起备案成功',
										complete() {
											_this.onGetOrder()
										}
									})
								} else {
									_this.errorData = result.hints
									_this.show = true
								}
							}
							uni.hideLoading()
						})
					}

				}).catch(err => {
					uni.hideLoading()
				})

			},
			onRefreshVerify(applet_id) {
				let _this = this
				queryVerifyTask({
					id: applet_id
				}).then(res => {
					console.log(res)
					_this.getApplet()
				}).catch(err => {

				})
			},

			onViewSubject(company_id, applet_id) {
				uni.navigateTo({
					url: '/pages/subject/form/index?id=' + company_id + "&applet_id=" + applet_id
				})
			},
			getApplet() {
				let _this = this
				applet({
					page: _this.page,
					limit: 15
				}).then(res => {
					_this.last_page = res.data.last_page
					if (_this.is_reach) {
						_this.lists = [..._this.lists, ...res.data.data]
					} else {
						_this.lists = res.data.data
					}
					_this.is_reach = false

				}).catch(err => {

				})
			},
			saveImage() {
				let _this = this
				_this.is_qrcode = false
				uni.saveImageToPhotosAlbum({
					filePath: _this.qrcodeSrc,
					success: () => {
						_this.$refs.uToast.show({
							type: 'success',
							message: "保存成功",
							complete() {

							}
						})
					}
				})
			},
			on_get_auth_page() {
				let _this = this
				uni.showLoading({
					title: '加载中...'
				})
				pre_auth_page({
					type: 'h5'
				}).then(res => {
					console.log(res.data.url, '10')
					_this.is_qrcode = true
					uQRCode.make({
						canvasId: 'qrcode',
						text: res.data.url,
						size: this.qrcodeSize,
						success: res => {
							this.qrcodeSrc = res
							console.log('qrcodeSrc = ' + this.qrcodeSrc);
						},
						complete: () => {
							uni.hideLoading()
						}
					})
					// // #ifdef MP-WEIXIN
					// const MiniprogramThirdpartyPlugin = requirePlugin('miniprogram-thirdparty-plugin')
					// // #endif
					// // 初始化
					// MiniprogramThirdpartyPlugin.init(wx)
					// // 请求用户授权 
					// let response = MiniprogramThirdpartyPlugin.openAuthorizeAccount({
					// 	platformAppID: res.data.platformAppID,
					// 	preAuthCode: res.data.url,
					// 	authType: 2
					// }).then(res => {
					// 	console.log(res)
					// }).catch(err => {
					// 	console.log(err) // 授权失败或其他异常
					// })
					// console.log(response)
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 240rpx;
	}

	.search {
		background-color: #fff;
		padding: 30rpx;
	}

	.submit {
		width: 100%;
		position: fixed;
		bottom: 30rpx;

		.btn {
			width: 90%;
			margin: 30rpx auto;

			.u-button {
				height: 100rpx;
			}
		}
	}

	.applet {
		width: 92%;
		margin: 0 auto;

		.item {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			padding: 15rpx 30rpx;
			margin: 15rpx 0rpx;
			border-radius: 10rpx;
			position: relative;
			overflow: hidden;

			.tips {
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				background-color: #18b566;
				color: #fff;
				padding: 10rpx;
				border-radius: 0rpx 0rpx 0rpx 10rpx;
			}

			.tips.Warning {
				background-color: #ff9900;
			}

			.tips.error {
				background-color: #fa3534;
			}

			.tips.success {
				background-color: #19be6b;
			}

			.header {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					font-size: 32rpx;
					font-weight: bolder;
					margin-left: 10rpx;
				}

				margin-bottom: 10rpx;
			}

			.content {
				display: flex;
				flex-direction: column;

				.line {
					display: flex;
					flex-direction: row;
					margin: 10rpx 0rpx;

					.label {
						width: 20%;
						margin-right: 30rpx;
						color: #82848a;
					}

					.value {
						width: 70%;
						color: #303133;
					}
				}
			}

			.btns {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				align-content: center;
				margin-top: 10rpx;
				border-top: 1rpx solid #e7e6e4;

				.btn {
					text-align: center;
					width: 50%;
					height: 81rpx;
					line-height: 81rpx;
				}

				.btn:not(:last-of-type) {
					border-right: 1rpx solid #e7e6e4;
				}
			}
		}
	}

	.error-msg {
		border-radius: 10rpx;
		min-height: 80rpx;
		padding: 20rpx;
		background-color: #dd6161;
		margin-top: 20rpx;
	}
</style>